<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
	layout:decorator="manage/common/layout">
<head>
<title>添加文章</title>
<script th:src="@{~/managed/assets/js/bootstrap-tag.min.js}"></script>
<link type="text/css" rel="stylesheet" th:href="@{~/managed/fileinput/css/fileinput.min.css}" />
<script th:src="@{~/managed/fileinput/js/fileinput.min.js}"></script>
<script th:src="@{~/managed/fileinput/js/locales/zh.js}"></script>
<script th:src="@{~/managed/layer/layer.js}" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" th:href="@{~/managed/layer/skin/default/layer.css}" />
<script type="text/javascript" th:src="@{~/managed/wangEditor/wangEditor.min.js}"></script>
<script type="text/javascript" th:src="@{~/managed/assets/js/jquery.form.js}"></script>
<script type="text/javascript" th:src="@{~/managed/common/blog.js}"></script>
</head>
<body>
	<div class="main-content" layout:fragment="content">
		<div class="main-content-inner">
			<div class="breadcrumbs ace-save-state" id="breadcrumbs">
				<ul class="breadcrumb">
					<li><i class="ace-icon fa fa-home home-icon"></i> <a
						href="${ctx}/manage/home">主页</a></li>
					<li class="active">添加文章</li>
				</ul>
			</div>
			<div class="page-content">
				<div class="row">
					<div class="col-xs-12">
						<form enctype="multipart/form-data"  class="form-horizontal" id="articleForm" role="form" th:action="@{/manage/article/addArticle}" method="post">
							<div class="form-group">
								<label class="col-sm-1 control-label no-padding-right"> 文章标题 </label>
								<div class="col-sm-9">
									<input type="text" class="col-xs-10 col-sm-7" name="articleTitle" />
								</div>
							</div>
                            <div class="form-group">
								<label class="col-sm-1 control-label no-padding-right">分类 </label>
								<div class="col-sm-9">
								    <select class="col-xs-10 col-sm-4" name="cate.cateId">
								         <option th:each="cate : ${cateList}" th:value="${cate.cateId}">
								          <span th:text="${cate.cateName}"></span>
								         </option>
								    </select>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-1 control-label no-padding-right">文章状态 </label>
								<div class="col-sm-9">
								    <select class="col-xs-10 col-sm-2" name="articleStatus">
								         <option value="1">激活</option>
								         <option value="0">未激活</option>
								    </select>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-1 control-label no-padding-right">文章概述 </label>
								<div class="col-sm-9">
								    <textarea rows="4" class="col-xs-10 col-sm-7" name="articleDescription"></textarea>
								</div>
							</div>

                            <div class="form-group">
								<label class="col-sm-1 control-label no-padding-right">关键词</label>

								<div class="col-sm-9">
									<input type="text" class="col-xs-10 col-sm-7" name="articleKeywords" id="form-field-tags" />
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-1 control-label no-padding-right"> 缩略图 </label>
								<div class="col-sm-9">
									<input id="thumbnail" type="file" name="file"   /> 
								</div>
							</div>

							<div class="form-group">
								<label class="col-sm-1 control-label no-padding-right"
									for="form-input-readonly">内容</label>

								<div class="col-sm-11">
									<div id="editor"></div>	
									<input id="articleContent" type="hidden" name="articleContent" />
									<input id="picture" type="hidden" name="picture" />							
								</div>
							</div>
							
							<div class="clearfix form-actions">
								<div class="col-md-offset-3 col-md-9">
									<button class="btn btn-info" type="button" onclick="saveRecord()">
										<i class="ace-icon fa fa-check bigger-110"></i> 保存
									</button>
									&nbsp; &nbsp; &nbsp;
									<button class="btn" type="reset">
										<i class="ace-icon fa fa-undo bigger-110"></i> 重置
									</button>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
		<script  type="text/javascript">
		var tag_input = $('#form-field-tags');
		try{
			tag_input.tag(
			  {
				source: ace.vars['US_STATES'],				
			  }
			)
			var $tag_obj = $('#form-field-tags').data('tag');		
			var index = $tag_obj.inValues('some tag');
			$tag_obj.remove(index);
		}
		catch(e) {		
			tag_input.after('<textarea id="'+tag_input.attr('id')+'" name="'+tag_input.attr('name')+'" rows="4">'+tag_input.val()+'</textarea>').remove();
		}
		
		$('#thumbnail').fileinput({ 
		    language : 'zh',   
		    showUpload: false,//是否显示上传按钮  
		    showRemove: false,//是否显示删除按钮  
		    showCaption: false,//是否显示输入框  
		    showPreview:true,   
		    showCancel:true,  
		    dropZoneEnabled: false,
		    allowedPreviewTypes : [ 'image' ],
		    allowedFileExtensions : [ 'jpg', 'png', 'gif','jpeg' ],   
		})
		
		var E = window.wangEditor;
        var editor = new E('#editor');
        editor.customConfig.uploadImgServer = /*<![CDATA[*/'/manage/uploadImage'/*]]>*/;
        editor.customConfig.uploadFileName = 'image';
        editor.create();
		
		function saveRecord() {
			  var picture = "";
	          $("#editor").find("img").each(function(){
	              var path =  $(this).attr("src");
	              picture +=  path + ",";           
	          })
	          $("#picture").val(picture);
	          var html = editor.txt.html();
	          $("#articleContent").val(html);
	    	  var articleForm = $("#articleForm");
	    	  var url = /*<![CDATA[*/"/manage/view/addArticle"/*]]>*/;
	    	  ajax_form(articleForm,url,null); 			  
		}
		
		</script>
	</div>

</body>
</html>